<template>
  <div class="chat">
    <el-card class="chat-container">
      <template #header>
        <div class="chat-header">
          <h2>AI 对话</h2>
        </div>
      </template>
      
      <div class="message-list" ref="messageList">
        <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
          <el-avatar :icon="message.role === 'user' ? 'UserFilled' : 'Service'" />
          <div class="message-content">
            {{ message.content }}
          </div>
        </div>
      </div>

      <div class="input-area">
        <el-input
          v-model="inputMessage"
          type="textarea"
          :rows="3"
          placeholder="请输入消息..."
          @keyup.enter.ctrl="sendMessage"
        />
        <el-button type="primary" @click="sendMessage" :loading="loading">
          发送
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { deepseekApi } from '@/api/deepseek'

interface Message {
  role: 'user' | 'assistant'
  content: string
}

const messages = ref<Message[]>([])
const inputMessage = ref('')
const loading = ref(false)
const messageList = ref<HTMLElement | null>(null)

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }

  try {
    loading.value = true
    
    // 添加用户消息
    messages.value.push({
      role: 'user',
      content: inputMessage.value
    })

    // 调用API
    const response = await deepseekApi.chat({
      messages: messages.value,
      temperature: 0.7,
      max_tokens: 1000
    })

    // 添加AI回复
    if (response && response.choices && response.choices[0]?.message?.content) {
      messages.value.push({
        role: 'assistant',
        content: response.choices[0].message.content
      })
    } else {
      throw new Error('Invalid response format')
    }

    // 清空输入
    inputMessage.value = ''

    // 滚动到底部
    await nextTick()
    if (messageList.value) {
      messageList.value.scrollTop = messageList.value.scrollHeight
    }

  } catch (error) {
    ElMessage.error('发送消息失败，请重试')
    console.error('发送消息失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化欢迎消息
onMounted(() => {
  messages.value.push({
    role: 'assistant',
    content: '你好！我是混元智能体AI助手，很高兴为您服务。请问有什么可以帮助您的吗？'
  })
})
</script>

<style scoped lang="scss">
.chat {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  .chat-container {
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }

  .chat-header {
    text-align: center;
    h2 {
      margin: 0;
    }
  }

  .message-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-height: 500px;

    .message {
      display: flex;
      margin-bottom: 20px;
      align-items: flex-start;

      .el-avatar {
        margin-right: 10px;
      }

      .message-content {
        background: #f4f4f5;
        padding: 10px 15px;
        border-radius: 8px;
        max-width: 80%;
      }

      &.assistant {
        .message-content {
          background: #ecf5ff;
        }
      }
    }
  }

  .input-area {
    margin-top: 20px;
    display: flex;
    gap: 10px;

    .el-input {
      flex: 1;
    }
  }
}
</style> 